<template>
  <view class="c-icon-list">
    <view v-for="(item, index) of list" :key="index" class="c-icon-item" @click="handleCopy(item)">
      <view class="c-icon-item__panel">
        <view class="c-icon-item__icon">
          <s-icon :name="item.name" :color="item.color" :size="item.size" />
        </view>
        <view v-if="showName" class="c-icon-item__name">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import componentMixin from '@/uni_modules/s-ui/mixins/componentMixin';

export default {
  name: 'CIconList',
  mixins: [componentMixin],
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    showName: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleCopy(item) {
      uni.setClipboardData({
        data: `<s-icon name="${item.name}"${item.color ? ` color="${item.color}"` : ''}${item.size ? ` size="${item.size}"` : ''} />`,
        success: () => { },
      });
    },
  },
};
</script>

<style lang="scss">
.c-icon-list {
  display: flex;
  flex-wrap: wrap;
}
.c-icon-item {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  &__icon {
    margin: 30rpx 0 30rpx;
  }
  &__name {
    height: 72rpx;
    margin: -8rpx 0 8rpx;
    padding: 0 10rpx;
    color: $content-color;
    font-size: $font-size-sm;
    line-height: $line-height-sm;
  }
  .s-icon {
    font-size: 64rpx;
    vertical-align: middle;
  }
}
</style>
